var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "components/common/base-component", "mobile/services/shoppingCartService", "react-dom", "./panel", "mobile/services/shoppingService", "maishu-services-sdk", "components/common/component"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const base_component_1 = require("components/common/base-component");
    const shoppingCartService_1 = require("mobile/services/shoppingCartService");
    const ReactDOM = require("react-dom");
    const panel_1 = require("./panel");
    const shoppingService_1 = require("mobile/services/shoppingService");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const component_1 = require("components/common/component");
    let ProductInfo = class ProductInfo extends base_component_1.BaseComponent {
        constructor(props) {
            super(props);
            this.state = {
                hideProperties: false,
                count: 1,
                productSelectedText: this.productSelectedText({})
            };
        }
        productSelectedText(product) {
            var str = '';
            var props = product.Fields || [];
            for (var i = 0; i < props.length; i++) {
                // var options = props[i].Options;
                // for (var j = 0; j < options.length; j++) {
                //     if (options[j].Selected) {
                //         str = str + options[j].Name + ' ';
                //         break;
                //     }
                // }
                str = str + props[i].value + ' ';
            }
            str = str + (this.state == null ? 1 : this.state.count) + '件';
            return str;
        }
        addToShoppingCart() {
            let product = this.props.product;
            let shoppingCart = this.createService(shoppingCartService_1.ShoppingCartService);
            return shoppingCart.setItemCount(product, this.state.count);
        }
        updateProductCount(value) {
            // this.state.count = value;
            // this.state.productSelectedText = this.productSelectedText(this.state.product);
            // this.setState(this.state);
            this.setState({ count: value, productSelectedText: this.productSelectedText(this.props.product) });
        }
        render() {
            let { hideProperties } = this.state;
            let { product } = this.props;
            let selectedText = this.productSelectedText(product);
            return React.createElement("div", { className: "productInfo-control" },
                React.createElement("ul", { key: 10, className: "list-group" },
                    React.createElement("li", { className: "list-group-item product-name" },
                        product.Name,
                        product.Title ?
                            React.createElement("h5", { className: "" }, product.Title) : null),
                    React.createElement("li", { className: "list-group-item" },
                        React.createElement("span", null, "\u4EF7\u683C\uFF1A"),
                        React.createElement("span", { className: "price" }, product.Price != null ? '￥' + product.Price.toFixed(2) : '')),
                    React.createElement("li", { className: "list-group-item", onClick: () => this.productPanel.show() },
                        React.createElement("span", null,
                            "\u5DF2\u9009\uFF1A",
                            selectedText),
                        React.createElement("span", { className: "pull-right" },
                            React.createElement("i", { className: "icon-chevron-right" })))),
                React.createElement("hr", { key: 20 }),
                !hideProperties ?
                    React.createElement("div", { key: 30, className: "container" },
                        React.createElement("h4", { style: { fontWeight: 'bold', width: '100%' } }, "\u5546\u54C1\u4FE1\u606F"),
                        (product.Arguments || []).map(o => (React.createElement("div", { key: o.key, style: { marginBottom: '10px' } },
                            React.createElement("div", { className: "pull-left", style: { width: '100px' } }, o.key),
                            React.createElement("div", { style: { marginLeft: '100px' } }, o.value),
                            React.createElement("div", { className: "clearfix" })))),
                        React.createElement("div", { className: "empty-info", style: { display: (product.Arguments || []).length == 0 ? 'block' : 'none' } }, "\u6682\u65E0\u5546\u54C1\u4FE1\u606F")) : null,
                !hideProperties ?
                    React.createElement("hr", { key: 40 }) : null,
                product == null || product.Id == null ? null :
                    ReactDOM.createPortal(React.createElement(ProductPanel, { key: "productPanel", ref: (o) => this.productPanel = o || this.productPanel, parent: this, product: product }), this.page.element));
        }
    };
    ProductInfo.defaultProps = { product: {} };
    ProductInfo = __decorate([
        component_1.component()
    ], ProductInfo);
    exports.ProductInfo = ProductInfo;
    class ProductPanel extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                product: this.props.product,
                count: this.props.parent.state.count,
                customProperties: []
            };
            this.imageService = this.props.parent.createService(maishu_services_sdk_1.ImageService);
        }
        decrease() {
            let count = this.state.count;
            if (count == 1) {
                return;
            }
            count = count - 1;
            // this.state.count = count;
            // this.setState(this.state);
            this.setState({ count });
        }
        increase() {
            let count = this.state.count;
            count = count + 1;
            // this.state.count = count;
            // this.setState(this.state);
            this.setState({ count });
            this.props.parent.updateProductCount(count);
        }
        onProductsCountInputChanged(event) {
            let value = Number.parseInt(event.target.value);
            if (!value)
                return;
            // this.state.count = value;
            // this.setState(this.state);
            this.setState({ count: value });
            this.props.parent.updateProductCount(value);
        }
        onFieldSelected(property, name) {
            property.Options.forEach(o => {
                o.Selected = o.Name == name;
            });
            var properties = {};
            this.state.customProperties.forEach(o => {
                properties[o.Name] = o.Options.filter(c => c.Selected)[0].Value;
            });
            let page = this.props.parent.page;
            let shop = page.createService(shoppingService_1.ShoppingService);
            return shop.productByProperies(this.state.product.Id, properties)
                .then(o => {
                // this.props.parent.state.product = o;
                // this.props.parent.setState(this.props.parent.state);
                // this.props.parent.setState({ product: o });
                // this.state.product = o;
                // this.setState(this.state);
                this.setState({ product: o });
                // productStore.value = o;
            });
        }
        show() {
            this.panel.show('right');
        }
        componentDidMount() {
            return __awaiter(this, void 0, void 0, function* () {
                let page = this.props.parent.page;
                let shopping = page.createService(shoppingService_1.ShoppingService);
                let p = this.state.product;
                if (p != null && p.Id != null) {
                    let customProperties = yield shopping.productCustomProperties(p.GroupId, p.Id);
                    // this.state.customProperties = customProperties;
                    // this.setState(this.state);
                    this.setState({ customProperties: customProperties });
                }
            });
        }
        render() {
            let p = this.state.product;
            let customProperties = this.state.customProperties;
            return (React.createElement(panel_1.Panel, { ref: (o) => this.panel = o, header: React.createElement("div", null,
                    React.createElement("nav", null,
                        React.createElement("ul", { className: "nav nav-tabs" },
                            React.createElement("li", { className: "text-left", style: { width: '30%' } },
                                React.createElement("button", { onClick: () => this.panel.hide(), style: { border: 'none', padding: 10, backgroundColor: 'inherit' } }, "\u5173\u95ED")))),
                    React.createElement("div", { style: { paddingTop: "10px" } },
                        React.createElement("div", { className: "pull-left", style: { width: 80, height: 80, marginLeft: 10 } },
                            React.createElement("img", { src: this.imageService.imageSource(p.ImagePath), className: "img-responsive" })),
                        React.createElement("div", { style: { marginLeft: 100, marginRight: 70 } },
                            React.createElement("div", null, p.Name),
                            React.createElement("div", { className: "price" },
                                "\uFFE5",
                                p.Price.toFixed(2)))),
                    React.createElement("div", { className: "clearfix" })), body: React.createElement("div", null, customProperties.map(o => (React.createElement("div", { key: o.Name, className: "container row" },
                    React.createElement("div", { className: "pull-left", style: { width: 60 } },
                        React.createElement("span", null, o.Name)),
                    o.Options.map(c => (React.createElement("div", { key: c.Name, style: { marginLeft: 60 } },
                        React.createElement("button", { onClick: () => this.onFieldSelected(o, c.Name), className: c.Selected ? 'cust-prop selected' : 'cust-prop' }, c.Name)))))))), footer: React.createElement("div", null,
                    React.createElement("div", { className: "form-group" },
                        React.createElement("div", { style: { width: 60, textAlign: 'left' }, className: "pull-left" },
                            React.createElement("span", null, "\u6570\u91CF")),
                        React.createElement("div", { style: { marginLeft: 60 } },
                            React.createElement("div", { className: "input-group" },
                                React.createElement("span", { className: "input-group-btn" },
                                    React.createElement("button", { className: "btn btn-default", onClick: () => this.decrease() },
                                        React.createElement("i", { className: "icon-minus" }))),
                                React.createElement("input", { className: "form-control", type: "number", value: `${this.state.count}`, onChange: this.onProductsCountInputChanged.bind(this) }),
                                React.createElement("span", { className: "input-group-btn" },
                                    React.createElement("button", { className: "btn btn-default", onClick: () => this.increase() },
                                        React.createElement("i", { className: "icon-plus" })))))),
                    React.createElement("div", { className: "clearfix" }),
                    React.createElement("button", { onClick: () => { this.props.parent.addToShoppingCart(); this.panel.hide(); }, className: "btn btn-primary btn-block", "data-dialog": "toast:'\u6210\u529F\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66'" }, "\u52A0\u5165\u8D2D\u7269\u8F66")) }));
        }
    }
});
